<template>
    <div class="violation">
      <div class="header">
        <div><span style="color: darkgrey">首页/</span>政策法规</div>
      </div>
      <div class="subject">
        <table>
          <thead>
            <tr>
              <th style="width: 80px">序号</th>
              <th style="width: 60%">政策法规标题</th>
              <th>发布时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td class="read-btn">
                <img src="../assets/images/主页/u19.png" alt="" title="" />
              </td>
              <td>{{ item.title }}</td>
              <td>{{ item.time }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <style scoped>
  .violation {
    width: 90vw;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 20px;
    max-width: 1200px;
  }
  
  .header {
    margin-top: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .btn {
      border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(32, 201, 164, 1);
    width: 80px;
    height: 20px;
    font-size: 8px;
    color: aliceblue;
  }
  
  .subject {
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid #ebeef5;
    white-space: nowrap;
  }
  
  td:nth-child(2) {
    white-space: normal;
    padding-left: 20px;
  }
  
  th {
    color: #909399;
    font-weight: 500;
    font-size: 14px;
    background: #20c9a4;
    color: white;
  }
  
  td {
    font-size: 14px;
    color: #606266;
  }
  
  .check {
    color: #20c9a4;
    cursor: pointer;
  }
  
  tr:hover {
    background-color: #f5f7fa;
  }
  
  .read-btn {
    width: 40px;
    text-align: center;
    cursor: pointer;
  }
  
  .read-btn img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  </style>
  
  <script>
  export default {
    data() {
      return {
        tableData: [
          {
            id: '01',
            title: '2023年度北京市财政局财政法律法规规章及制度执行情况评估项目',
            time: '2022-04-13',
          },
          {
            id: '02',
            title: '变更公告] 珠海电厂2023-2025年度法律法规符合性评估等服务公开询价公告变更公告',
            time: '2022-04-13',
          },
          {
            id: '03',
            title: '印制《惠州市市容和环境卫生管理条例》（法规版）',
            time: '2022-04-13',
          },
          {
            id: '04',
            title: '2023年广州市水务局法律法规动态调整委托编制项目',
            time: '2022-04-13',
          },
          {
            id: '05',
            title: '关于印发《关于完善招标投标交易担保制度进一步降低招标投标交易成本的实施方案》的...',
            time: '2022-04-13',
          },
          {
            id: '06',
            title: '彭泽县教育系统后勤管理问题政策法规宣知书',
            time: '2022-04-13',
          },
          {
            id: '07',
            title: '（审计办）印刷服务—社区审计法规汇编第二期',
            time: '2022-04-13',
          },
          {
            id: '08',
            title: '民族宗教政策法规宣传月活动宣传发放资料',
            time: '2022-04-13',
          },
          {
            id: '09',
            title: '（审计办）印刷服务—社区审计法规汇编第一期',
            time: '2022-04-13',
          },
          {
            id: '10',
            title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
            time: '2022-04-13',
          },
          {
            id: '11',
            title: '常用环保法律法规汇编',
            time: '2022-04-13',
          },
          {
            id: '12',
            title: '统计法律法规宣传资料印刷',
            time: '2022-04-13',
          },
          {
            id: '13',
            title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
            time: '2022-04-13',
          },
          {
            id: '14',
            title: '侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金',
            time: '2022-04-13',
          },
          {
            id: '15',
            title: '关于严格执行招标投标法规制度进一步规范招标投标主体行为的若干意见',
            time: '2022-04-13',
          }
        ]
      }
    }
  }
  </script>